<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>客户管理</title>
		<link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css"  tppabs="https://www.layui.site/layui/dist/css/layui.css"  media="all">
	</head>
	<body>
		<div class="layui-panel" style="padding-top: 20px;margin: 15px;text-align: center;">
			<div class="layui-form">
				<div class="layui-form-item">
					<div class="layui-inline"style="width:500px">
						<label class="layui-form-label" style="width:200px;">请输入客户相关信息进行查询：</label>
						<div class="layui-input-block" >
						  <input style="width: 250px;" type="text" name="custName" lay-verify="required" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-inline">
						<button type="button" id="sercrh" class="layui-btn layui-btn-radius">查&nbsp;&nbsp;&nbsp;询</button>
					</div>
				</div>
			</div>
		</div>
		
		<script type="text/html" id="toolbarDemo">
		  <div class="layui-btn-container">
		    <button class="layui-btn layui-btn-sm" id="memberInsert" lay-event="memberInsert">新增</button>
		  </div>
		</script>
		
		<script type="text/html" id="barDemo">
		  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
		
		<div class="layui-panel" style="margin: 15px; ">
			<table class="layui-hide" lay-filter="member" id="test3"></table>
		</div>
		<script src="../../layui/layui.js" charset="utf-8"></script>
		<script>
			layui.use(['form', 'table', 'layer'], function() {
				var tree = layui.tree
				    ,layer = layui.layer
					,table = layui.table
					,$ = layui.jquery;
				
				$(function() {
					// 搜索按钮绑定回车键
					$("body").keydown(function() {
						if (event.keyCode == "13") {	// keyCode=13是回车键
							$('#sercrh').click();
						}
					});
				});
					
				table.render({
				    elem: '#test3'
				    ,url: '../../../searchMemberInfo'
					,toolbar: '#toolbarDemo'
				    ,cols: [[
				      {field:'custId', width:100, title: '客户编号'}
				      ,{field:'custName', width:120, title: '客户名称'}
				      ,{field:'custPhone', width:120, title: '联系电话'}
				      ,{field:'custAddress', width:120, title: '联系地址'}
				      ,{field:'', title: '客户类型名称', width: 150 , templet:function(obj){
						  return obj.customerType.custTypeName;
					  }}
				      ,{field:'custSex', width:80, title: '性别'}
				      ,{field:'custDate', width:120, title: '出生日期', sort: true,templet:'<div>{{ layui.util.toDateString(d.custDate, "yyyy-MM-dd") }}</div>'}
				      ,{field:'custMenmber', width:120, title: '会员号'}
				      ,{field:'custComment', width:135, title: '备注'}
					  ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:120}
				    ]],
				    limits: [6, 15, 20, 25, 50, 100],
					limit: 6,
				    page: true
				});
				//搜索表格重载
				$(document).on('click',"#sercrh",function(){
					var className = $("input[name='custName']").val();
					table.reload('test3', {
					    url:"../../../searchMemberInfo?custName="+className,
					    page: {
					        curr: 1
					    }
					}); 
				})
				//添加用户弹窗
				table.on('toolbar(member)', function(obj){
				    switch(obj.event){
				      case 'memberInsert':
					  window.memberInfo='';
						layer.open({
							type: 2,
							title: '添加客户',
							scrollbar: false,
							area: ['750px', '90%'],
							content: 'memberInsertInfo.html',
							success: function(obj){
							}
						});
				      break;
				    };
				});
				
				//删除用户
				table.on('tool(member)', function(obj){
					var data = obj.data; //获得当前行数据
					var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
					if(layEvent === 'del'){ //删除
					    layer.confirm('真的删除行么', function(){
							$.get("/updateMemberInfoDelect",{custId:data.custId},function(row){
								if(row = 1){
									obj.del();
									layer.msg("删除成功")
								}else{
									layer.msg("删除失败")
								}
							})
					      //向服务端发送删除指令
					    });
					} else if(layEvent === 'edit'){
						window.memberInfo = JSON.stringify(data);
						layer.open({
							type: 2,
							title: '修改客户信息',
							scrollbar: false,
							area: ['750px', '90%'],
							content: 'memberInsertInfo.html',
							success: function(layero, index){
							}
						});
					}
				})
			})
		</script>
	</body>
</html>
